<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>EaselJS: Tileset SpriteSheet Example</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>

	<script src="../lib/easeljs-NEXT.js"></script>
	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

	<script type="text/javascript">
		var stage;
		function init() {
			// create a new stage and point it at our canvas:
			stage = new createjs.Stage("testCanvas");
			
			// load the spritesheet image:
			var image = new Image();
			image.onload = handleLoad;
			image.src = "../_assets/art/tmw_desert_spacing.png";
		}
		
		function handleLoad(evt) {
			// define the spritesheet:
			var ss = new createjs.SpriteSheet({
					images: [evt.target],
					frames: {width:32, height:32, regX:0, regY:0, spacing:1, margin:1}
				});

			// define a tile map:
			var map = [
				[ 1,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  3, 30, 30],
				[ 9, 10, 10, 20, 18, 18, 18, 21, 10, 10, 10, 10, 11, 32, 30],
				[ 9, 10, 10, 11, 25, 26, 27,  9, 20, 21, 10, 10, 11, 30, 30],
				[17, 18, 18, 19, 41, 42, 43, 17, 19, 17, 18, 18, 19, 39, 30],
				[30, 30, 31, 30,  6,  8, 46, 30, 40, 25, 26, 26, 26, 26, 27],
				[30, 30, 40, 32, 14, 16, 30, 30, 30, 33, 36, 37, 36, 37, 35]
			]

			var container = new createjs.Container();
			stage.addChild(container);
			// draw the map:
			var rows = map.length,
					cols = map[0].length;
			for (var row=0; row<rows; row++) {
				for (var col=0; col<cols; col++) {
					var idx = map[row][col] - 1;

					var tile = new createjs.Sprite(ss)
							.set({x: 32*col, y:32*row});
					tile.gotoAndStop(idx);
					container.addChild(tile);
				}
			}
			container.cache(0, 0, cols*32, rows*32);
			container.scale = 2.1;
			
			// update the stage to draw to screen:
			stage.update();
		}

	</script>
</head>
<body onload="init();">

<header id="header" class="EaselJS">
	<h1>Tileset</h1>
	<p>Drawing a tile map with <code>Sprite</code> instances. Shows the use of the <code>margin</code> and <code>spacing</code> option of <code>SpriteSheet</code> data.</p>
</header>

<div>
	<canvas id="testCanvas" width="960" height="400"></canvas>
</div>
</body>
</html>